<template>
	<view class="container">
		<!-- 对话框的按钮 -->
		<button class="aibutten" type="primary" @click="aiChatting">考试</button>
		<view>
			<!-- 视频播放区域  -->
			<view class="video-container" v-if="isshowvedio">
				<video id="myVideo" ref="videoRef" class="video" :src="videoUrl" :controls="true"
					:show-center-play-btn="true" :enable-progress-gesture="true" :show-fullscreen-btn="true"></video>
			</view>
			<!-- 内容区域 -->
			<view class="content">
				<view class="tabs">
					<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
						:class="{ active: currentTab === index }" @click="switchTab(index)">
						{{ tab.name }}
					</view>
				</view>
				<scroll-view class="scroll-content" scroll-y>
					<!-- 章节列表 -->
					<view v-if="currentTab === 0" class="chapter-list">
						<view v-for="(chapter, index) in videoTree" :key="index" class="chapter-item"
							@click="selectChapter(chapter,index)">
							<view class="chapter-info">
								<text class="chapter-title"
									:class="currentChapter === index ? ['active'] : ''">{{ chapter.title }}</text>
								<text class="chapter-duration">30:00</text>
							</view>
							<view class="chapter-status">
								<text v-if="chapter.free" class="free-tag">免费</text>
								<!-- <uni-icons v-if="chapter.free" type="play-filled" size="16" color="#2979ff"/> -->
								<!-- v-else -->
								<uni-icons type="lock-filled" size="16" color="#999" />
							</view>
						</view>
					</view>
					<!-- 课程简介 -->
					<view v-if="currentTab === 1" class="course-intro">
						<button class="generate-btn" @click="tohomework">作业题目</button>
						<view class="intro-section">
							<text class="section-title">课程介绍</text>
							<text class="section-content">{{clazz.description}}</text>
						</view>
						<view class="intro-section">
							<text class="section-title">讲师介绍</text>
							<text class="section-content">王教授，具有十年AI开发经验，曾任职于多家知名科技公司，专注于机器学习和深度学习领域。</text>
						</view>
						<view class="intro-section">
							<text class="section-title">课程亮点</text>
							<text class="section-content">• 系统化的AI基础知识体系\n• 实战项目驱动学习\n• 一线企业真实案例分析\n• 定期在线答疑解惑</text>
						</view>
					</view>
					<!-- 课程笔记 -->
					<view v-if="currentTab === 2" class="course-notes">
						<view v-for="(note, index) in noteList" :key="index" class="note-item">
							<view class="note-header">
								<text class="note-title">{{ note.title }}</text>
								<text class="note-tag" v-if="note.free">免费</text>
							</view>
							<view class="note-preview">{{ note.preview }}</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 底部购买栏 -->
			<view class="bottom-bar" v-if="showorder">
				<view class="price-info">
					<text class="price">¥{{resdata.courses.price}}</text>
					<!-- <text class="origin-price">¥1000</text> -->
				</view>
				<uni-button type="primary" class="buy-btn" @click="handleBuy">立即下单</uni-button>
			</view>
		</view>
	</view>

</template>
<script lang="ts" setup>
	import { onBackPress } from '@dcloudio/uni-app'
	import { navigateToLogin } from '@/components/navigateTo.js'
	import { onLoad } from '@dcloudio/uni-app'
	import { onMounted, ref } from 'vue';
	import { getVideos, isOrder } from '@/pages/utils/api/clazz.js'  //
	import { useUserStore } from '@/stores/api.js'
	const userStore = useUserStore();
	const videoUrl = ref("http://a8b26d56.natappfree.cc/java113/前端开发2/开发2/章节2222/课程2222/a211aff9-f08f-4301-9993-63706b2bb1b0.mp4")
	//const videoUrl = ref('http://192.168.75.1:9000/java113/后端开发/undefined/java第一阶段/b256edc0-d41f-43be-bfc2-99c3b65bd37c.mp4')
	const currentTab = ref(0)
	const currentChapter = ref(0)
	let showorder = ref(false);
	let clazz = {};
	let isshowvedio = ref(false);
	const tabs = [
		{ name: '章节' },
		{ name: '简介' },
		{ name: '笔记' }
	]
	const videoTree = ref([]);
	let resdata = ref({
		isorder: '',
		courses: null
	});
	const chapterList = [
		// { title: '第1课-基础概念入门', duration: '30:00', free: true },
		// { title: '第2课-AI基础环境搭建', duration: '45:00', free: false },
		// { title: '第3课-AI智能体开发', duration: '60:00', free: false }
	]
	const noteList = [
		// { title: '第1课-基础概念入门.md', preview: '人工智能基础概念解析，包含机器学习基础理论...', free: true },
		// { title: '第2课-环境搭建详解.md', preview: 'Python开发环境配置，深度学习框架安装...', free: false },
		// { title: '第3课-智能体开发笔记.md', preview: '智能体架构设计，强化学习算法实现...', free: false }
	]
	const switchTab = (index : number) => {
		currentTab.value = index;
		if (userStore.getUserName == undefined) {
			navigateToLogin('购买需要先返回登录页面');
			return;
		}
	}
	const tohomework = () => {
		uni.navigateTo({
			url: "/pages/homework/homework?description=" + clazz.description,
			success() {
				console.log('跳转成功')
			}

		});
	}
	const selectChapter = (chapter : any, index : any) => {
		if (userStore.getUserName == undefined) {
			navigateToLogin('想要体验该功能，请先登录哦');
			return;
		}
		console.log(chapter, index)
		currentChapter.value = index;
		videoUrl.value = chapter.link;
	}
	const goBack = () => {
		uni.navigateBack()
	}
	//  course/getChapter
	const getVideo = async (courseId) => {
		let data = {
			courseId: courseId
		}

		try {
			const res = await getVideos(data);
			videoTree.value = res.data;
			console.log('treeData', res.data);
		} catch (error) {
			console.log('获取数据失败', error)
		}
	}
	const handleBuy = () => {
		// uni.showToast({
		// title: '购买功能开发中',
		// icon: 'none'
		// })
		// 获取课程ID和价格
		const courseIds = clazz.courseId
		// const paymentAmounts = '299' // 这里可以根据实际情况设置价格
		// 在这里判断如果 没有登录 就去登录页面

		if (userStore.userInfo == "" || userStore.userInfo == null) {
			navigateToLogin('购买需要先返回登录页面');
			return;
		}
		// 跳转到立即购买页面
		uni.navigateTo({
			url: '/pages/orderPage/buynowPage?courseIds=' + courseIds + '&paymentAmounts=' + resdata.value.courses.price,
			success: () => {
				console.log('跳转到购买页面成功')
			},
			fail: (err) => {
				console.error('跳转失败：', err)
				uni.showToast({
					title: '跳转失败',
					icon: 'none'
				})
			}
		})

	}
	onBackPress(() => {
		// 这里可以添加你的逻辑判断
		uni.switchTab({
			url: '/pages/clazzcenter/clazzcenter' // 指定要跳转的页面路径
		})
		return true // 拦截默认返回行为
	})

	const getOrder = async () => {
		let data = {
			userId: userStore.getUserId,
			courseId: clazz.courseId,
		}

		const res = await isOrder(data);
		resdata.value = res.data;
		if (resdata.value.isorder == null) {
			isshowvedio.value = false;
			showorder.value = true;
		} else {
			isshowvedio.value = true;
			showorder.value = false;
		}
	}
	// AI聊天功能
	const aiChatting = () => {
		if (userStore.userInfo == "" || userStore.userInfo == null) {
			navigateToLogin('想要体验ai考试需要先返回登录页面');
			return;
		}
		console.log('打开AI聊天窗口');
		// 实现AI聊天窗口的逻辑
		uni.navigateTo({
			url: '/pages/ai-exam/ai-exam'
		})
	}
	onMounted(() => {
		// 根据userId 和  courid查 是否购买 如果购买了 这个页面的视频就能看
		// console.log('页面参数:', options.categoryId);
		if (userStore.userInfo != null && userStore.userInfo != undefined) {
			isshowvedio.value = false;
		}
		getVideo(clazz.courseId);
		getOrder();
		userStore.setCatergoryDeatil(null);
		userStore.setClazz(clazz);
		//根据userID 查 
	})
	onLoad((options) => {
		clazz = options;
	})
</script>
<style>
	page {
		height: 100%;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.header {
		height: 88rpx;
		background-color: #ffffff;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.header-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.title {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
	}

	.currentChapter {
		color: #dc4b15
	}

	.video-container {
		width: 750rpx;
		height: 422rpx;
		background-color: #000000;
		flex-shrink: 0;
	}

	.video {
		width: 100%;
		height: 100%;
	}

	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding-bottom: 100rpx;
		/* 关键：为底部栏预留空间 */
	}

	.tabs {
		height: 88rpx;
		display: flex;
		background-color: #ffffff;
		flex-shrink: 0;
	}

	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #666666;
		position: relative;
	}

	.tab-item.active {
		color: #2979ff;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		width: 40rpx;
		height: 4rpx;
		background-color: #2979ff;
		border-radius: 2rpx;
	}

	.scroll-content {
		flex: 1;
		overflow: auto;
		padding-bottom: 100rpx;
		/* 关键 */
	}

	.chapter-list {
		padding: 20rpx 30rpx;
	}

	.active {
		color: #ff826b !important;
	}

	.chapter-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.chapter-info {
		flex: 1;
		margin-right: 20rpx;
	}

	.chapter-title {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 10rpx;
		display: block;
	}

	.chapter-duration {
		font-size: 24rpx;
		color: #999999;
	}

	.chapter-status {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.free-tag {
		font-size: 24rpx;
		color: #2979ff;
		background-color: rgba(41, 121, 255, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
	}

	.course-intro {
		padding: 30rpx;
	}

	.intro-section {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		margin-bottom: 20rpx;
		display: block;
	}

	.section-content {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.6;
	}

	.course-notes {
		padding: 30rpx;
	}

	.note-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.note-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.note-title {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.note-tag {
		font-size: 24rpx;
		color: #2979ff;
		background-color: rgba(41, 121, 255, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
	}

	.note-preview {
		font-size: 26rpx;
		color: #999999;
		line-height: 1.6;
	}

	/* .bottom-bar {
height: 100rpx;
background-color: #ffffff;
padding: 0 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
margin-top: 20rpx;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
} */
	.bottom-bar {
		height: 100rpx;
		background-color: #ffffff;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
	}


	.price-info {
		display: flex;
		align-items: baseline;
		gap: 12rpx;
	}

	.price {
		font-size: 36rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.origin-price {
		font-size: 24rpx;
		color: #999999;
		text-decoration: line-through;
	}

	.buy-btn {
		width: 240rpx;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 36rpx;
		font-size: 28rpx;
		margin: 0;
	}

	.aibutten {
		background-color: #007aff;
		/* background: url("http://localhost:9999/ai.png") no-repeat center 0px; */
		background-position: center 0px;
		background-size: cover;
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 13%;
		right: 9%;
		z-index: 9999;
	}

	.uni-button {
		margin: 0px 0 10px 0;
	}
</style>